import React from 'react'
import { Swiper } from 'antd-mobile'
// import { SwiperRef } from 'antd-mobile/es/components/swiper'
import PropTypes from 'prop-types'

export default function AntSwiper(props) {
  return (
    <div>
      <Swiper autoplay loop autoplayInterval={2000}
        indicator={(total, current) => (
          // total表示总的轮播数量，current表示当前轮播的是谁
          <div style={{position:'absolute', bottom:'10px', right:'10px'}}>
            {`${current + 1} / ${total}`}
          </div>
        )}>
        {
            props.arr.length>0?props.arr.map(ele=>{
                return <Swiper.Item key={ele.id}>
                    <img src={ele.imgUrl} width="100%" alt="" />
                </Swiper.Item>
            }):<Swiper.Item></Swiper.Item>
        }
      </Swiper>
    </div>
  )
}

// props数据类型
AntSwiper.propTypes = {
    arr:PropTypes.array.isRequired
}
